const pdfViewer = document.getElementById("pdfViewer");
const url = "./附件一 测点布置及设备数量相关图纸_extract.pdf"; // 替换为你的PDF文件路径

// 引入pdf.js和pdf.worker.js
import pdfjsLib from "pdfjs-dist";
pdfjsLib.GlobalWorkerOptions.workerSrc =
  "./node_modules/pdfjs-dist/build/pdf.worker.min.js";

// 加载PDF
pdfjsLib
  .getDocument(url)
  .promise.then((pdf) => {
    console.log("PDF loaded");

    // 获取第一页
    pdf.getPage(1).then((page) => {
      console.log("Page loaded");

      const viewport = page.getViewport({ scale: 1 });
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");

      // 设置canvas尺寸
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      pdfViewer.appendChild(canvas);

      // 渲染页面到canvas
      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  })
  .catch((error) => {
    console.error("Error loading PDF", error);
  });
